<template>
  <div class="flex align-center" ref="wrapper">
    <el-input
      v-if="isOutside"
      type="text"
      v-model.trim="layerName"
      placeholder="请输入图层名称"
      ref="editingInput"
    >
    </el-input>
    <p v-else>
      {{ layerName }}
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, nextTick } from "vue";
import useClickOutside from "@/hooks/useClickOutside";
import useAppInstance from "@/hooks/useAppInstance";
export default defineComponent({
  props: {
    layerValue: {
      type: String,
      required: true,
    },
  },
  setup(props, context) {
    // dom
    let wrapper = ref<null | HTMLElement>(null);
    let editingInput = ref<null | HTMLInputElement>(null);
    const { globalFunc } = useAppInstance();
    // 图层名称
    let layerName = ref(props.layerValue);
    // 是否点击
    let isOutside = useClickOutside(wrapper);
    watch(isOutside, async (newValue: any) => {
      if (newValue) {
        await nextTick();
        if (editingInput.value) {
          editingInput.value.focus();
        }
      } else {
        if (!layerName.value) {
          globalFunc.$message.warning({
            message: "图层名称不能为空",
            type: "warning",
          });
          layerName.value = props.layerValue;
          return;
        }
        context.emit("onChangeLayerName", layerName);
      }
    });
    return {
      isOutside,
      layerName,
      wrapper,
      editingInput,
    };
  },
});
</script>

<style lang="scss" scoped></style>
